﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>确认订单页</title>
		<link rel="stylesheet" href="css/orderform.css" />
		<link rel="stylesheet" href="css/login.css">
		<link rel="stylesheet" type="text/css" href="css/header.css" />
	</head>

	<body>
		<div class="contain">
			<div class="contain-left">
				<div class="contain-left-title">
					<p>我的暴风商城</p>
				</div>
				<ul class="contain-left-ordercenter">
					<li class="contain-left-ordercenter-title">
						<p>订单中心</p>
					</li>
					<li class="contain-left-order-active">我的订单</li>
					<li class="contain-left-order">暴风影音VIP订单</li>
					<li class="contain-left-order">暴风TV影视会员订单</li>
					<li class="contain-left-order">众筹订单</li>
					<li class="contain-left-order">魔镜商城历史订单</li>
				</ul>
				<div class="contain-left-order-After-salesservice">售后服务</div>
				<div class="contain-left-returngoods">
					<p>退货</p>
				</div>
				<div class="contain-left-personal">
					<div class="contain-left-personal-title">个人中心</div>
					<ul class="contain-left-personal-container">
						<li>我的优惠券</li>
						<li>我的余额</li>
						<li ><a href="myOrder-favourate.html">喜欢的商品</a></li>
						<li>我的消息</li>
					</ul>
				</div>
				<div class="contain-left-accountManager">
					<div class="contain-left-accountManager-title">账户管理</div>
					<ul class="contain-left-accountManager-container">
						<li><a href="myorder-changepassword.html" >修改密码</a></li>
						<li>收货地址管理</li>
					</ul>
				</div>

			</div>
			<div class="orderform">
				<div class="orderform-header">
					<ul class="orderform-header-summary">
						<li>
							<a href="">全部订单</a>
							<div class="orderform-header-border">
								<p>|</p>
							</div>
						</li>
						<li>
							<a href="">待付款</a>
							<div class="orderform-header-border">
								<p>|</p>
							</div>
						</li>
						<li>
							<a href="">待发货</a>
							<div class="orderform-header-border">
								<p>|</p>
							</div>
						</li>
						<li>
							<a href="">待签收</a>
							<div class="orderform-header-border">
								<p>|</p>
							</div>
						</li>
						<li>
							<a href="">已取消</a>
						</li>
					</ul>
					<div class="orderform-input"><input type="text" placeholder="订单号/商品名称" /></div>
					<div class="orderform-input-button">
						<div class="orderform-input-button-search"></div>
					</div>
				</div>
				<div class="orderform-navigationbar">
					<ul class="orderform-navigationbar-detailproduct"></ul>
					<ul class="orderform-navigationbar-menu">
						<li>数量</li>
						<li>金额</li>
						<li>应付款</li>
						<li>收货人</li>
						<li>状态</li>
						<li>操作</li>
					</ul>
				</div>
				<div class="orderform-navigationbar-item-title">
					<span class="orderform-navigationbar-item-time">下单时间：<span class="orderform-item-times">2019-01-19 08:11:57</span></span>
					<span class="orderform-navigationbar-item-numberNO">订单号:<span class="orderform-navigationbar-item-number">4330087269793792</span></span>
					<span class="orderform-navigationbar-item-selfsupport">暴风自营</span>
				</div>
				<!--操作标题-->
				<div class="orderform-navigationbar-table">
					<ul class="orderform-navigationbar-table-left">
						<li class="orderform-navigationbar-table-left-1">
							<div class="orderform-navigationbar-table-left-w">
								<div class="orderform-navigationbar-table-left-img"></div>
								<div class="orderform-navigationbar-table-left-title">暴风魔镜-白日梦VR眼镜</div>
							</div>
							<div class="orderform-navigationbar-table-left-count">*2</div>
							<div class="orderform-navigationbar-table-left-price">149元</div>
						</li>
						<li class="orderform-navigationbar-table-left-2">
							<div class="orderform-navigationbar-table-left-w">
								<div class="orderform-navigationbar-table-left-img"></div>
								<div class="orderform-navigationbar-table-left-title">暴风魔镜-白日梦VR眼镜</div>
							</div>
							<div class="orderform-navigationbar-table-left-count">*2</div>
							<div class="orderform-navigationbar-table-left-price">149元</div>
						</li>
					</ul>
					<div class="orderform-navigationbar-table-right"><span class="orderform-navigationbar-table-right-price"></span>
						<span class="orderform-navigationbar-table-right-freight">含运费：0元</span> <span class="orderform-navigationbar-table-right-line"></span>
						<span class="orderform-navigationbar-table-right-pay">在线支付</span>
					</div>
					<ul class="orderform-navigationbar-table-right-message">
						<li></li>
						<li></li>
						<li>
							<div class="orderform-navigationbar-table-right-btn">付款</div>
						</li>
					</ul>
				</div>

			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer/layer.js"></script>
		<script>
			$.ajaxSetup({
				async: false
			})
			console.log(localStorage.getItem("pay")==="1")
			
			
			var userid = $.cookie("userId")
			var height
			$.get("/getOrder", {
				userId: userid
			}, function(data) {
				$(".orderform-navigationbar-item-title").empty()
				$(".orderform-navigationbar-item-title").append(`<span class=\"orderform-navigationbar-item-time\">下单时间：<span class=\"orderform-item-times\">${data.creatTime}</span></span>\n
					<span class=\"orderform-navigationbar-item-numberNO\">订单号:<span class=\"orderform-navigationbar-item-number\">${data.orderNumber}</span></span>\n
					<span class=\"orderform-navigationbar-item-selfsupport\">暴风自营</span>`)

			})
			$.get("/getOrderimg", {
				userId: userid
			}, function(data) {
				console.log(data)
				$(".orderform-navigationbar-table-left").empty()
				data.forEach(function(item) {

					$(".orderform-navigationbar-table-left").append(`<li class="orderform-navigationbar-table-left-1">
			<div class="orderform-navigationbar-table-left-w">
			<img class="orderimg" src="${item.img}" alt="">

				<div class="orderform-navigationbar-table-left-title">${item.title}</div>

			</div>
			<div class="orderform-navigationbar-table-left-count">x${item.count}</div>
			<div class="orderform-navigationbar-table-left-price">${item.unitPrice}元</div>
		</li>`)
				})
				height = $(".orderform-navigationbar-table").outerHeight()
				$(".orderform-navigationbar-table-right").css("height", `${height-10}px`)
			})

			$.get("/getOrder", {
				userId: userid
			}, function(data) {
				$(".orderform-navigationbar-table-right").empty()
				$(".orderform-navigationbar-table-right").append(`<span class="orderform-navigationbar-table-right-price">${data.totalPrice}元</span>
	<span class="orderform-navigationbar-table-right-freight">含运费：0元</span> <span class="orderform-navigationbar-table-right-line"></span>
		<span class="orderform-navigationbar-table-right-pay">在线支付</span>`)

			})
			$.get("/getOrder", {
				userId: userid
			}, function(data) {
				$(".orderform-navigationbar-table-right-message").empty()
				$(".orderform-navigationbar-table-right-message").append(`<li><p>${data.user_realname}</p>
<p>${data.user_tel}</p>
</li>
		<li><p>${data.state}</p>
	<div id="time" style="text-align:center;margin-top:10px;color:red;"></div>
	</li>
		<li class="orderform-navigationbar-table-border"><div class="orderform-navigationbar-table-right-btn">付款</div></li>`)
				height = $(".orderform-navigationbar-table").outerHeight()
				$(".orderform-navigationbar-table-right-message li").css("height", `${height-12}px`)
			})
			$(".orderform-navigationbar-table").on("click", ".orderform-navigationbar-table-right-btn", function() {
					layer.msg("付款成功", {
						icon: 6
					}, 500)
					localStorage.setItem("pay","1")
					$(".orderform-navigationbar-table-right-btn").text("已付款")
					location.href = "sucesspay.html"
					
				}
			)
			
			//倒计时
			var totalsec
			var n = new Date()
			var newTime = new Date(n).getTime()
			localStorage.setItem("newTime", newTime)
			var startTime = localStorage.getItem("startTime")<!-- //创建订单时的时间 -->
			var jiange = parseInt(newTime) - parseInt(startTime)<!-- //现在的时间 -->
			totalsec = Math.floor(3600 * 24 - parseInt(jiange) / 1000)
			console.log(totalsec)
			/*if($.cookie("totaltime")){
			totalsec=parseInt($.cookie("totaltime"))
			}*/

			var formatTime = function(sec) {
				var h = 0
				var m = 0
				var s = 0

				if(sec >= 60 * 60) {
					h = Math.floor(sec / (60 * 60))
					if(sec % (60 * 60) >= 60) {
						m = Math.floor((sec % (60 * 60)) / 60)

					}

					if(sec % 60 > 0) {
						s = sec % 60
					}

				} else if(sec >= 60) {
					m = Math.floor(sec / 60)
					if(sec % 60 > 0) {
						s = sec % 60
					}
				} else {
					s = sec
				}

				return buling(h) + ":" + buling(m) + ":" + buling(s)
			}

			var buling = (val) => {
				return val >= 10 ? val : ("0" + val)
			}
			var timer
			var setTime = () => {
				timer = setInterval(() => {
					$("#time").text(formatTime(--totalsec))
					if(totalsec<=0){
						$.post("/delOrder",{userId: userid},function(data){
						})
						clearInterval(timer)
						$("#time").text("00:00:00")
					}
				}, 1000)
			}
			$("#time").text(formatTime(totalsec))
			
			setTime()
			if(localStorage.getItem("pay")==="1"){
				$(".orderform-navigationbar-table-right-btn").text("已付款")
				$(".orderform-navigationbar-table-right-btn").prop("disabled",true)
				clearInterval(timer)
				$("#time").text("00:00:00")
			}
			<!-- localStorage.removeItem("pay") -->
			//
		</script>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/alertLogin.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/header.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/addheader.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("body").addHeader()
		</script>
	</body>

</html>